Copy-Webpack-Plugin

可以將整個檔案或資料夾不須透過打包，直接複製到最後的 Bundle 資料夾。通常使用在 CSS 或是 Images 資料夾。

先安裝 Plugin

npm i copy-webpack-plugin -D

設定檔調整如下

webpack.common.js

var CleanWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      { from: 'Resource/Images/*', to: '/Images/' },
      { from: 'Resource/Css/*', to: '/Css/' }
  ])
  ]
}

執行打包之後，會複製以下這兩個資料夾：

1. Resource/Images/ 底下所有的檔案複製到 Resource/Bundle/Images/
2. Resource/Css/ 底下所有的檔案則複製到 Resource/Bundle/Css/

詳細使用方式請看這裡

Clean-Webpack-Plugin

每次執行打包會先將目標資料夾清空，避免資料夾存在其他舊的 Bundle 檔案。

先安裝 Plugin

npm i clean-webpack-plugin -D

設定檔調整如下

webpack.common.js

var CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  plugins: [
    new  CleanWebpackPlugin(['Resource/Bundle'], {
      verbose:  true
    }),
  ]
}

這樣每次打包前，都會先將 Resource/Bundle 資料夾整個刪除，確保最終資料夾只有最新的 Bundle 檔案。

詳細使用方式請看這裡